<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋小游戏</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        #gameInfo {
            margin-bottom: 20px;
            font-size: 20px;
        }
        canvas {
            border: 10px solid #8B4513;
            background-color: #D2B48C;
        }
        .game-over-dialog {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            text-align: center;
            z-index: 1000;
        }
        .game-over-dialog button {
            margin-top: 10px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="gameInfo">当前轮到黑棋</div>
    <canvas id="gameCanvas" width="450" height="450"></canvas>
    <div id="gameOverDialog" class="game-over-dialog">
        <p id="gameOverMessage"></p>
        <button onclick="resetGame()">重新开始</button>
    </div>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const gameInfo = document.getElementById('gameInfo');
        const gameOverDialog = document.getElementById('gameOverDialog');
        const gameOverMessage = document.getElementById('gameOverMessage');

        const GRID_SIZE = 15;
        const CELL_SIZE = 30;
        const BOARD_SIZE = GRID_SIZE * CELL_SIZE;
        const BORDER_SIZE = 10;

        let board = Array.from({ length: GRID_SIZE }, () => Array(GRID_SIZE).fill(0));
        let currentPlayer = 1; // 1: 黑棋, -1: 白棋
        let gameOver = false;

        function drawBoard() {
            ctx.fillStyle = '#D2B48C';
            ctx.fillRect(0, 0, BOARD_SIZE, BOARD_SIZE);

            ctx.strokeStyle = '#8B4513';
            ctx.lineWidth = 1;
            for (let i = 0; i <= GRID_SIZE; i++) {
                ctx.beginPath();
                ctx.moveTo(i * CELL_SIZE, 0);
                ctx.lineTo(i * CELL_SIZE, BOARD_SIZE);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(0, i * CELL_SIZE);
                ctx.lineTo(BOARD_SIZE, i * CELL_SIZE);
                ctx.stroke();
            }
        }

        function drawPiece(x, y, player) {
            ctx.beginPath();
            ctx.arc(x * CELL_SIZE + CELL_SIZE / 2, y * CELL_SIZE + CELL_SIZE / 2, CELL_SIZE / 2 - 2, 0, 2 * Math.PI);
            ctx.fillStyle = player === 1 ? 'black' : 'white';
            ctx.fill();
            ctx.stroke();
        }

        function checkWin(x, y, player) {
            const directions = [
                [1, 0], // 水平
                [0, 1], // 垂直
                [1, 1], // 正对角线
                [1, -1] // 反对角线
            ];

            for (let [dx, dy] of directions) {
                let count = 1;
                for (let i = 1; i < 5; i++) {
                    const nx = x + dx * i;
                    const ny = y + dy * i;
                    if (nx >= 0 && nx < GRID_SIZE && ny >= 0 && ny < GRID_SIZE && board[nx][ny] === player) {
                        count++;
                    } else {
                        break;
                    }
                }
                for (let i = 1; i < 5; i++) {
                    const nx = x - dx * i;
                    const ny = y - dy * i;
                    if (nx >= 0 && nx < GRID_SIZE && ny >= 0 && ny < GRID_SIZE && board[nx][ny] === player) {
                        count++;
                    } else {
                        break;
                    }
                }
                if (count >= 5) {
                    return true;
                }
            }
            return false;
        }

        function checkDraw() {
            return board.every(row => row.every(cell => cell !== 0));
        }

        function handleClick(event) {
            if (gameOver) return;

            const rect = canvas.getBoundingClientRect();
            const x = Math.floor((event.clientX - rect.left) / CELL_SIZE);
            const y = Math.floor((event.clientY - rect.top) / CELL_SIZE);

            if (x >= 0 && x < GRID_SIZE && y >= 0 && y < GRID_SIZE && board[x][y] === 0) {
                board[x][y] = currentPlayer;
                drawPiece(x, y, currentPlayer);

                if (checkWin(x, y, currentPlayer)) {
                    gameInfo.textContent = currentPlayer === 1 ? '黑棋获胜！' : '白棋获胜！';
                    gameOverMessage.textContent = currentPlayer === 1 ? '黑棋获胜！' : '白棋获胜！';
                    gameOverDialog.style.display = 'block';
                    gameOver = true;
                } else if (checkDraw()) {
                    gameInfo.textContent = '平局！';
                    gameOverMessage.textContent = '平局！';
                    gameOverDialog.style.display = 'block';
                    gameOver = true;
                } else {
                    currentPlayer = -currentPlayer;
                    gameInfo.textContent = currentPlayer === 1 ? '当前轮到黑棋' : '当前轮到白棋';
                }
            }
        }

        function resetGame() {
            board = Array.from({ length: GRID_SIZE }, () => Array(GRID_SIZE).fill(0));
            currentPlayer = 1;
            gameOver = false;
            gameInfo.textContent = '当前轮到黑棋';
            gameOverDialog.style.display = 'none';
            drawBoard();
        }

        canvas.addEventListener('click', handleClick);
        window.addEventListener('keydown', (event) => {
            if (event.key === 'r' && gameOver) {
                resetGame();
            }
        });

        drawBoard();
    </script>
</body>
</html>